<template>
	<public-view navType="other" navTitle="维修厂入驻" :navShowIndex="false">
		<view class="content">
			<view class="form-box w-100 flex f-d-c">
				<picker :range="['维修','保养']" @change="changeGender">
					<view class="form-item flex a-i-c j-c-b w-100">
						<view class="left flex a-i-c">
							<view class="left-title f-s-28 line-h-40">
								店铺类型
							</view>
							<input class="input" type="text" :disabled="true" :value="genre_text" placeholder="请选择店铺类型">
						</view>
						<view class="right">
							<image class="" src="@/static/images/form-next.svg" mode=""></image>
						</view>
					</view>
				</picker>
				<view class="form-item flex a-i-c j-c-b w-100">
					<view class="left flex a-i-c">
						<view class="left-title f-s-28 line-h-40 f-w-b" style="border: none;">
							店铺信息
						</view>
					</view>
				</view>
				<view class="form-item flex a-i-c j-c-b w-100">
					<view class="left flex a-i-c">
						<view class="left-title f-s-28 line-h-40">
							*店铺名称
						</view>
						<input class="input" v-model="name" type="text" placeholder="请输入店铺名称">
					</view>
					<view class="right">
						<!-- <image class="" src="@/static/images/form-next.svg" mode=""></image> -->
					</view>
				</view>
				<view class="form-item flex a-i-c j-c-b w-100">
					<view class="left flex a-i-c">
						<view class="left-title f-s-28 line-h-40">
							*服务范围
						</view>
						<input class="input" type="text" v-model="service_scope" placeholder="请输入服务范围">
					</view>
					<!-- <view class="right">
						<image class="" src="@/static/images/form-next.svg" mode=""></image>
					</view> -->
				</view>
				<view class="form-item flex a-i-c j-c-b w-100">
					<view class="left flex a-i-c">
						<view class="left-title f-s-28 line-h-40">
							*收费标准
						</view>
						<input class="input" v-model="rates" type="text" placeholder="请输入收费标准">
					</view>
					<!-- <view class="right">
						<image class="" src="@/static/images/form-next.svg" mode=""></image>
					</view> -->
				</view>
				<view class="form-item flex a-i-c j-c-b w-100" @click="openAddress">
					<view class="left flex a-i-c">
						<view class="left-title f-s-28 line-h-40">
							*所在地区
						</view>
						<input class="input" v-model="show_address" :disabled="true" type="text" placeholder="请选择所在地区">
					</view>
					<view class="right">
						<image class="" src="@/static/images/form-next.svg" mode=""></image>
					</view>
				</view>
				<view class="form-item flex a-i-c j-c-b w-100">
					<view class="left flex a-i-c">
						<view class="left-title f-s-28 line-h-40">
							*详细地址
						</view>
						<input class="input" style="width: 490rpx;" v-model="detail_address" type="text" placeholder="请输入详细地址">
					</view>
					<view class="right">
						<!-- <image class="" src="@/static/images/form-next.svg" mode=""></image> -->
					</view>
				</view>
				<view class="form-item flex a-i-c j-c-b w-100" @click="changeLog">
					<view class="left flex a-i-c">
						<view class="left-title f-s-28 line-h-40">
							*营业时间
						</view>
						<!-- <input class="input" v-model="open_time" type="text" placeholder="请选择营业时间"> -->
						<view class="input l-h-42">
							{{openTime||"请选择营业时间"}}
						</view>
					</view>
					<view class="right">
						<!-- <image class="" src="@/static/images/form-next.svg" mode=""></image> -->
					</view>
				</view>
				<view class="form-item flex a-i-c j-c-b w-100">
					<view class="left flex a-i-c">
						<view class="left-title f-s-28 line-h-40 f-w-b" style="border: none;">
							联系信息
						</view>
					</view>
				</view>
				<view class="form-item flex a-i-c j-c-b w-100">
					<view class="left flex a-i-c">
						<view class="left-title f-s-28 line-h-40">
							*联系人
						</view>
						<input class="input" v-model="principal_name" type="text" placeholder="与营业执照相同的法人名字">
					</view>
					<view class="right">
					</view>
				</view>
				<view class="form-item flex a-i-c j-c-b w-100">
					<view class="left flex a-i-c">
						<view class="left-title f-s-28 line-h-40">
							*联系电话
						</view>
						<input class="input" v-model="principal_phone" type="text" placeholder="请输入有效电话号码">
					</view>
					<view class="right">
					</view>
				</view>
				<view class="form-item flex a-i-c j-c-b w-100">
					<view class="left flex a-i-c">
						<view class="left-title f-s-28 line-h-40 f-w-b" style="border: none;">
							其他信息
						</view>
					</view>
				</view>
				<view class="upload-box">
					<view class="title f-s-28 f-w-b">
						上传店铺照片
					</view>
					<view class="upload-image all-center f-d-c" @click="uploadImage('gas')">
						<block v-if="images[0].length<=0">
							<image class="icon" src="@/static/images/my/cmber-d3d3d3.svg" mode=""></image>
							<view class="color-959595 f-s-22">
								点击拍照/上传
							</view>
						</block>
						<block v-else>
							<image style="width: 100%;height: 100%;" :src="images[0]" mode=""></image>
						</block>
					</view>
				</view>
				<view class="upload-box">
					<view class="title f-s-28 f-w-b">
						拍摄上传营业执照照片
					</view>
					<view class="upload-image all-center f-d-c" @click="uploadImage('store')">
						<block v-if="business_license[0].length<=0">
							<image class="icon" src="@/static/images/my/cmber-d3d3d3.svg" mode=""></image>
							<view class="color-959595 f-s-22">
								点击拍照/上传
							</view>
						</block>
						<block v-else>
							<image style="width: 100%;height: 100%;" :src="business_license[0]" mode=""></image>
						</block>
					</view>
				</view>
				<view class="upload-box">
					<view class="title f-s-28 f-w-b">
						负责人身份证正反面
					</view>
					<view class="flex a-i-c j-c-b w-100">
						<view class="upload-image all-center f-d-c" @click="uploadImage('card1')">
							<block v-if="principal_id_card_image[0].length<=0">
								<image class="icon" src="@/static/images/my/cmber-d3d3d3.svg" mode=""></image>
								<view class="color-959595 f-s-22">
									上传身份证正面
								</view>
							</block>
							<block v-else>
								<image style="width: 100%;height: 100%;" :src="principal_id_card_image[0]" mode=""></image>
							</block>
						</view>
						<view class="upload-image all-center f-d-c" @click="uploadImage('card2')">
							<block v-if="principal_id_card_image[1].length<=0">
								<image class="icon" src="@/static/images/my/cmber-d3d3d3.svg" mode=""></image>
								<view class="color-959595 f-s-22">
									上传身份证反面
								</view>
							</block>
							<block v-else>
								<image style="width: 100%;height: 100%;" :src="principal_id_card_image[1]" mode=""></image>
							</block>
						</view>
					</view>
					<view class="agree-btn-view f-s-24">
						<checkbox-group @change="changeIsaregg">
							<label class="flex a-i-c">
								<checkbox value="1" :checked="is_agree == '1'?true:false" style="transform: scale(0.8);" /><text>我已阅读并同意 <text class="color-2567F3">《入驻协议》</text></text>
							</label>
						</checkbox-group>
					</view>
					<view class="submit-btn all-center color-fff f-s-30" @click="requireForm">
						{{status === 1?"审核已通过":"提交审核"}}
					</view>
				</view>
			</view>
			<my-picker ref="addressPicker" @addressBack="addressBack"></my-picker>
			<week-popup ref="weekPopup" @dateBack="dateBack"></week-popup>
		</view>
	</public-view>
</template>

<script>
	import pickerView from "@/components/myComponents/pickerView.vue"
	import weekPopup from "@/components/myComponents/weekPopup.vue"
	import {joinSubmit} from "@/utils/join.js"
	export default {
		components:{
			"my-picker":pickerView,
			"week-popup":weekPopup
		},
		data() {
			return {
				name:"",
				service_desc:"",
				service_scope:"",
				rates:"",
				lng:"",
				lat:"",
				class_ids:"",
				gasoline_ids:[],
				province_id:"",
				city_id:"",
				area_id:"",
				detail_address:"",
				principal_name:"",
				principal_phone:"",
				images:[""],
				business_license:[""],
				principal_id_card_image:['',''],
				show_address:"",
				is_agree:"0",
				status:0,
				business_time:{weeks:[],start:'',end:""},
				genre_text:"",
				genre:""
			};
		},
		computed:{
			openTime(){
				const chineseNumbers = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
				let arr = [],str=""
				console.log(this.business_time.weeks,"this.business_time.weeks")
				this.business_time.weeks.map(val=>{
					arr.push(chineseNumbers[val])
				})
				str =`${arr.toString()} ${this.business_time.start}-${this.business_time.end}`
				if(arr.length<=0){
					str = "请选择营业时间"
				}
				return str || ""
			}
		},
		onLoad(o){
			console.log(o)
			this.genre = o.genre
			this.genre_text = this.genre == 0?'维修':'保养'
			this.getJoinInfo()
		},
		methods:{
			changeGender(e){
				console.log(e)
				this.genre = e.detail.value
				this.genre_text = this.genre == '0'?'维修':'保养'
			},
			changeLog(e){
				console.log(e)
				this.$refs.weekPopup.show(this.business_time)
			},
			dateBack(e){
				console.log(e)
				this.business_time = e
			},
			getJoinInfo(){
				let that = this
				that.util.postRequest({
					url:'v1/merchant/info',
					data:{type:'3',genre:that.genre}
				}).then(res=>{
					let data = res.data
					if(data){
						let principal_id_card_image = []
						if(data?.principal_id_card_image){
							principal_id_card_image = data.principal_id_card_image.split(',')
						}
						that.genre = data.genre
						this.genre_text = this.genre == 0?'维修':'保养'
						that.name = data.name
						that.principal_id_card_image = principal_id_card_image
						that.business_license[0] = data.business_license
						that.images[0] = data.images
						that.principal_name = data.principal_name
						that.principal_phone = data.principal_phone
						that.rates = data.rates
						that.lng = data.lng
						that.lat = data.lat
						that.status = data.status
						that.setAddressLocation({longitude:data.lng,latitude:data.lat})
						that.detail_address = data.detail_address
						that.business_time = data.business_time
					}
				})
			},
			changeIsaregg(e){
				console.log(e)
				this.is_agree = e.detail.value[0] || '0'
			},
			requireForm(){
				if(this.status === 1){
					// uni.showToast({
					// 	title:"审核已通过"
					// })
					return
				}
				if(this.genre_text === ''){
					uni.showToast({
						title:'请选择类型',
						icon:"none"
					})
					return
				}
				if(this.name === ''){
					uni.showToast({
						title:'请输入店铺名称',
						icon:"none"
					})
					return
				}
				if(this.rates.length<=0){
					uni.showToast({
						title:`请输入${key}#收费标准`,
						icon:"none"
					})
					return
				}
				if(this.show_address.length<=0){
					uni.showToast({
						title:'请选择所在地区',
						icon:"none"
					})
					return
				}
				if(this.detail_address.length<=0){
					uni.showToast({
						title:'请输入详细地址',
						icon:"none"
					})
					return
				}
				if(this.principal_name.length<=0){
					uni.showToast({
						title:'请输入联系人姓名',
						icon:"none"
					})
					return
				}
				if(this.principal_phone.length !==11){
					uni.showToast({
						title:'输入联系人电话不正确',
						icon:"none"
					})
					return
				}
				if(this.images[0].length<=0){
					uni.showToast({
						title:'请上传店铺照片',
						icon:"none"
					})
					return
				}
				if(this.business_license[0].length<=0){
					uni.showToast({
						title:'请上传营业执照',
						icon:"none"
					})
					return
				}
				if(this.principal_id_card_image[0].length<=0){
					uni.showToast({
						title:'请上传身份证正面照片',
						icon:"none"
					})
					return
				}
				if(this.principal_id_card_image[1].length<=0){
					uni.showToast({
						title:'请上传身份证反面照片',
						icon:"none"
					})
					return
				}
				if(this.is_agree == '0'){
					uni.showToast({
						title:'请先阅读并同意《入驻协议》',
						icon:"none"
					})
					return
				}
				this.submitJoinForm()
			},
			submitJoinForm(){
				let that = this
				uni.showLoading({
					title:"提交中..."
				})
				joinSubmit("3",{
					name:that.name,
					genre:that.genre,
					service_desc:that.service_desc,
					service_scope:that.service_scope,
					rates:that.rates,
					lng:that.lng,
					lat:that.lat,
					class_ids:[],
					gasoline_ids:[],
					province_id:that.province_id,
					city_id:that.city_id,
					area_id:that.area_id,
					detail_address:that.detail_address,
					principal_name:that.principal_name,
					principal_phone:that.principal_phone,
					images:that.images,
					business_license:that.business_license,
					principal_id_card_image:that.principal_id_card_image,
					business_time:that.business_time
				})
				// that.util.postRequest({
				// 	url:"v1/merchant/apply",
				// 	data:
				// }).then(res=>{
				// 	uni.hideLoading()
				// 	uni.showToast({
				// 		title:"提交成功!"
				// 	})
				// 	console.log(res,"submit")
				// }).catch(e=>{
				// 	console.log(e)
				// 	uni.hideLoading()
				// 	uni.showToast({
				// 		title:e.msg,
				// 		icon:"none",
				// 		duration:2500
				// 	})
				// })
			},
			uploadImage(type){
				let that = this
				that.util.uploadFile().then(res=>{
					switch(type){
						case "gas":
							that.images[0] = res.data.fullurl
							break;
						case "store":
							that.business_license[0] = res.data.fullurl
							break;
						case "card1":
							that.principal_id_card_image[0] = res.data.fullurl
							break;
						case "card2":
							that.principal_id_card_image[1] = res.data.fullurl
							break;
					}
				})
			},
			addressBack(e){
				console.log(e)
				this.show_address = `${e.provinces.name}${e.city.name}${e.area.name}`
				this.province_id = e.provinces.id
				this.city_id = e.city.id
				this.area_id = e.area.id
			},
			openAddress(){
				let that = this
				that.$location.myGetLocation((res)=>{
					uni.showLoading({
						title:"地址解析中..."
					})
					that.detail_address = res.name
					that.lng = res.longitude
					that.lat = res.latitude
					that.setAddressLocation(res)
				})
			},
			setAddressLocation(res){
				let that = this
				that.$getLeve3Address(res.latitude,res.longitude,(back)=>{
					that.show_address = `${back[0].name}${back[1].name}${back[2].name}`
					that.province_id = back[0].id
					that.city_id = back[1].id
					that.area_id = back[2].id
					uni.hideLoading()
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.form-box{
		.submit-btn{
			background: #2567F3;
			border-radius: 46upx;
			width: 630upx;
			height: 96upx;
			margin: 66upx auto;
		}
		.agree-btn-view{
			width: 100%;
			padding: 0 24upx;
			margin-top: 50upx;
		}
		.upload-box{
			width: 100%;
			padding: 30upx 36upx 30upx 26upx;
			background: #FFFFFF;
			.title{
				margin-bottom: 32upx;
			}
			.upload-image{
				width: 338upx;
				height: 194upx;
				border-radius: 16upx;
				background: #fafafa;
				.icon{
					width: 60upx;
					height: 60upx;
					margin-bottom: 26upx;
				}
			}
		}
		.form-item{
			width: 100%;
			background: #FFFFFF;
			padding: 30upx 36upx 30upx 26upx;
			border-bottom: 2upx solid #F4F4F4;
			.right{
				width: 18upx;
				height: 26upx;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.left{
				.input{
					width: 400rpx;
					font-size: 24upx;
				}
				.left-title{
					margin-right: 36upx;
				}
			}
		}
		.formbox-title{
			padding-left: 26upx;
			margin-bottom: 24upx;
		}
	}
	.content{
		width: 750upx;
		min-height: 100vh;
		padding-top: 42upx;
	}
</style>
